<template>
<!--    最新MV页面-->
    <div class="newmv">
<!--        分类标签区域-->

        <div class="tagArea">
            <!--        地区标签-->
            <div class="tag">
                <div class="tagItem" style="font-weight: bolder">地区:</div>
                <div v-for="(item,index) in areaTag" class="tagItem" :key="index" style="font-weight: lighter" @click="areaMv(item)" :class="{turnRed:tag==item}">
                    {{item}}
            </div>
             </div>
<!--            类型标签-->
            <div class="tag">
                <div class="tagItem" style="font-weight: bolder">类型:</div>
                <div v-for="(item,index) in typeTag" class="tagItem" :key="index" style="font-weight: lighter" @click="typeMv(item)" :class="{turnRed:tag==item}">
                    {{item}}
                </div>
            </div>
<!--                排序标签-->
            <div class="tag">
                <div class="tagItem" style="font-weight: bolder">排序:</div>
                <div v-for="(item,index) in rankTag" class="tagItem" :key="index" style="font-weight: lighter"@click="rankMv(item)" :class="{turnRed:tag==item}">
                    {{item}}
                </div>
            </div>
        </div>

<!--        mv展示区域-->
        <div class="show">
            <div v-for="(item,index) in mvList" class="showItem" :key="index" @click="mvDetail(item)">
                <img style="width: 100%;height: 100px;border-radius: 5px;" :src="item.cover">
                <div style="font-size: 15px;font-weight: bolder;color: #303133">{{item.name}}</div>
                <div style="font-size: 10px">{{item.artistName}}</div>
            </div>
        </div>

        <!--        分页区域-->
        <div class="pagination">
            <el-pagination
                    background
                    layout="prev, pager,next"
                    :total="this.count"
                    :page-size="8"
                    @current-change="handCurrentChange"
                    :current-page="page"

            >
            </el-pagination>
        </div>
    </div>

</template>

<script>
    import axios from 'axios' ;
    export default {
        name: "newmv",
        data(){
            return{
                areaTag:['全部','内地','港台','欧美','日本','韩国'],
                typeTag:['全部','官方版','原声','现场版','网易出品'],
                rankTag:['上升最快','最热','最新'],
                mvList:[0,1,2,3,4,5,6,7],
                area:'全部',
                type:'全部',
                order:'上升最快',
                page:1,
                count:0,
                tag:'全部'
            }
        },
        created() {
                this.getNewMv(this.page)
        },
        methods:{
                getNewMv(page){
                    axios({
                        url:'https://autumnfish.cn/mv/all',
                        method:'get',
                        params:{
                            area:this.area,
                            type:this.type,
                            order:this.order,
                            limit:8,
                            offset:(page-1)*8
                        }
                    }).then(res=>{
                        this.count=res.data.count;
                        this.mvList=res.data.data;
                        console.log(res)
                    },err=>{
                        console.log(err)
                    })

                },
            areaMv(name){
                this.area=name;
                this.tag=name;
                this.getNewMv(this.page)
            },
            typeMv(name){
                this.type=name;
                this.tag=name;
                this.getNewMv(this.page)
            },
            rankMv(name){
                this.order=name;
                this.tag=name;
                this.getNewMv(this.page)
            },
            handCurrentChange(val){
                    this.page=val;
                    this.getNewMv(this.page)
            },
            mvDetail(item){
                    this.$router.push({
                        path:'/mvDetail',
                        query:{
                            id:item.id
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .newmv{
        width: 95%;
        /*margin-left: 60px;*/

    }
    .tagArea{

        width: 60%;
        height: 150px;

    }
    .tag{
        display: flex;
        margin-top: 20px;
    }
    .tagItem{
        flex: 1;

    }
        .show{

            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    .showItem{
        width: 22%;


    }
    .pagination{
        margin-top:50px ;
        margin-left: 200px;

    }
    .turnRed{
        color: red;
    }
    .tagItem:hover{
        cursor:pointer
    }
    .showItem:hover{
        cursor:pointer
    }
</style>